<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>我要发布</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/zhucexinxi.css">
    <link rel="stylesheet" href="../css/tanchuang.css">
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="../css/uploader.css" />
    <style>
        body{background: #f5f5f5;}
        .my_text{width: 100%;height: 3.55rem;box-sizing: border-box;border:0.01rem solid #ccc;font-size: 0.26rem;line-height: 0.4rem;padding:0.2rem;font-family: "微软雅黑";}
        .my_caozuo{ padding-top: 0.6rem;}
        .my_caozuo a{
            width: 3.45rem;
            height: 0.88rem;
            background: #52cd96;
            color: #fff;
            font-size: 0.3rem;
            line-height: 0.88rem;
            text-align: center;
            border-radius: 0.08rem;

        }
    </style>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/resize.js"></script>
    <script type="text/javascript" src="../js/webuploader.js" ></script>
    <script>
        $(window).ready(function(){
            resetFont();
        });
        $(window).resize(function(){
            resetFont();
        });
    </script>
</head>
<body>
<div class="my_content content">
    <p class="nametitle">新优特产品名称<span class="nameTilteB">*</span></p>
    <input type="text" class="inputText" placeholder="必填">
    <p class="nametitle">新优特产品图片<span class="nameTilteB">*</span></p>
    <div class="clearfix">
        <div class="project_box" style="width: 5.4rem;">
            <div class="my_input" >
                <div class="project_box" style="width: 5.4rem;">
                    <div class=""  id="uploader-demo">
                        <div id="fileList" class="uploader-list"></div>
                        <div class="add-a"><div id="filePicker"><em class="iconfont">＋</em></div></div>
                    </div>
                    <input id="addNum" type="hidden" value="0">
                </div>
            </div>
            <script>
                jQuery(function() {
                    var $ = jQuery,
                            $list = $('#fileList'),
                            ratio = window.devicePixelRatio || 1,
                            thumbnailWidth =40 * ratio,
                            thumbnailHeight = 40 * ratio,
                            uploader;
                    uploader = WebUploader.create({
                        auto: true,
                        resize: true,
                        fileNumLimit:6,
//                    swf: '/Public/html/xzzg/js/Uploader.swf', //add by fz
//                    server: '/index.php/Home/Public/uploadFile', //add by fz
                        pick: '#filePicker',
                        accept: {
                            title: 'Images',
                            extensions: 'gif,jpg,jpeg,bmp,png',
                            mimeTypes: 'image/*'
                        }
                    });
                    uploader.on( 'fileQueued', function( file ) {
                        var pic_id = 'WU_FILE_' +  $("#addNum").val();
                        var $li = $(
                                        '<div id="' + pic_id + '" class="file-item thumbnail">' +
                                        '<img>' +
                                        '<div class="info">' + file.name + '</div>' +
                                        '<p class="but-del"><em class="clos"></em></p>'+
                                        '</div>'
                                ),
                                $img = $li.find('img');

                        $list.append( $li );


                        uploader.makeThumb( file, function( error, src ) {
                            if ( error ) {
                                $img.replaceWith('<span>����Ԥ��</span>');
                                return;
                            }

                            $img.attr( 'src', src );
                        }, thumbnailWidth, thumbnailHeight );//$("#addNum")[0]=document.getElementById
                        var addNum=Number($("#addNum")[0].value);//��ͼƬ��ǿ��ת����int��ʽ
                        var num=addNum+1;
                        $("#addNum")[0].value=num;


                        $(".but-del").on("click",function(){
                            uploader.removeFile( file );
                            //add by fz
//                        var url = $(this).next().val();
//                        var urls = $('.js_building_thumbs').val();
//                        var urls = _.filter(urls.split(','), function (item) {
//                            return item != '' && item != url;
//                        });
//                        $('.js_building_thumbs').val(urls.join(','));
                            //end add

                            $(this).parent().remove();
                            $(".add-a").show();
                            var addNum=Number($("#addNum")[0].value);//
                            var num=addNum-1;
                            $("#addNum")[0].value=num;
                            return;
                        })


                    });


                    uploader.on( 'uploadProgress', function( file, percentage ) {
                        var $li = $( '#'+file.id ),
                                $percent = $li.find('.progress span');

                        // �����ظ�����
                        if ( !$percent.length ) {
                            $percent = $('<p class="progress"><span></span></p>')
                                    .appendTo( $li )
                                    .find('span');
                        }

                        $percent.css( 'width', percentage * 100 + '%' );
                    });

                    uploader.on( 'uploadSuccess', function(file ,response) {
                        if(response.status=='200') {
                            var pic_id = 'WU_FILE_' + parseInt($("#addNum").val() - 1);
                            // add by fz
                            $('.js_building_thumbs').val($('.js_building_thumbs').val() + ',' + response.url);
                            // end add
                            var addNum = $("#addNum")[0].value;
                            var input = "<input class='num' id='num_" + pic_id + "' type='hidden'  value='" + response.url + "'/>";//�������ص�һ���ļ�����
                            $('#' + pic_id).append(input);
                        }
                        $( '#'+pic_id ).addClass('upload-state-done');
                        $( '#'+pic_id + ' img').attr('src',response.url);
                    });

                    uploader.on( 'uploadError', function( file,response ) {
                        var $li = $( '#'+file.id ),
                                $error = $li.find('div.error');


                        if ( !$error.length ) {
                            $error = $('<div class="error"></div>').appendTo( $li );
                        }


                    });


                    uploader.on( 'uploadComplete', function( file ) {
                        $( '#'+file.id ).find('.progress').remove();
                    });

                    uploader.on('error', function(handler) {
                        if(handler=="Q_EXCEED_NUM_LIMIT"){
                            document.getTag("div").style.display="none";
                        }
                    });
                });
            </script>
        </div>
    </div>
    <p class="nametitle">推荐理由<span class="nameTilteB">*</span></p>
    <textarea class="my_text" placeholder="请填写推荐理由"></textarea>

    <div class="my_caozuo">
        <a href="javascript:void(0);" class="float_l">取  消</a>
        <a href="javascript:void(0);" class="float_r">发  布</a>

    </div>
</div>
<a class="my_tuiguang" href="javascript:void (0);">发  布</a>
<div class="tanchuang success none">
    <div class="tanchuangCont">
        <div class="tipmess">
            <h3>发布成功！</h3>
        </div>
        <div class="decsion onebtn">
            <a href="javascript:void(0);" class="my_sure">确定</a>
        </div>
    </div>
</div>
</body>
</html>